<template>
	<view class="passenger-flow">
		<view class=""
			style="width: 100%;height: 180rpx;background-color: #fff;position: relative;top: 0;z-index: 999;">
			<view class="con-1">
				<view class="bg">
					<view class="address">
						<view class="flex-space-between">
							<view class="flex-align">
								<van-image v-if="itemChooselist.venue_thumb != ''" width="74rpx" height="74rpx"
									radius="2" style="margin-right: 10rpx;" :src="itemChooselist.venue_thumb" />
								<van-image v-else width="74rpx" height="74rpx" radius="10rpx" fit="cover" style="margin-right: 10rpx;" src="https://img.yzcdn.cn/vant/cat.jpeg" />
								<view>
									<view class="address-name">{{itemChooselist.venue_name}}</view>
									<view class="address-desc">地址:{{itemChooselist.address}}</view>
								</view>
							</view>
							<view class="exchange flex-center flex-column " @click="show_no">
								<van-icon name="exchange" size="16" />
								切换
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="group_2">
			<view class="" style="width: 100%;height: 1rpx;background-color: #dedede;"></view>
			<view class="group_3">
				<text lines="1" class="text_2">选择会员</text>
				<view class="item" style="border-bottom: solid 2rpx #efefef;">
					<view class="flex-space-between week-list" @click="selectclick">
						<input type="text" placeholder="请选择" disabled>
					</view>
				</view>
				<!-- <view class="section_1" >
					<view class="box_3">
						<image
							src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/085daf5db91a498e8c78611923004528_mergeImage.png"
							class="label_1"></image>
						<view class="box_name">
							<view class="">
								姓名
							</view>
							<view class="">
								15651039999
							</view>
						</view>
					</view>
					<view class="image-text_1">
						<view class="image-card">
							<image
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9367c740c8c54dbbe7a9c91fb0340c88f456f3bc.png"
								class="image_1"></image>
							<text lines="1" class="text-group_1">卡包列表</text>
						</view>
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6508a8b599f77dec7de702cf655b10351b025310.png"
							class="icon_2"></image>
					</view>
				</view> -->
				<text lines="1" class="text_8">选择卡型</text>
				<view class="section_1" >
					<view class="box_3">
						<view style="margin-top: 20rpx;">
							<u-radio-group v-model="sex" @change="groupChange">
								<u-radio label="时间卡" :name="1" />
								<u-radio label="计次卡" :name="2" customStyle="margin-left: 60rpx;" />
								<u-radio label="充值卡" :name="3" customStyle="margin-left: 60rpx;" />
								<u-radio label="私教卡" :name="4" customStyle="margin-left: 60rpx;" />
							</u-radio-group>
						</view>
					</view>
				</view>
				
				<text lines="1" class="text_8">选择卡</text>
				<view class="item" style="border-bottom: solid 2rpx #efefef;">
					<view class="flex-space-between week-list" @click="cardclick">
						<input type="text" placeholder="请选择" disabled >
					</view>
				</view>

				<text lines="1" class="text_8">开卡方式</text>
				<view class="item" style="border-bottom: solid 2rpx #efefef;">
					<view class="flex-space-between week-list">
						<input type="text" placeholder="请选择" disabled v-model="ordersList.card_relation" disabled  @click="showcard = true">
					</view>
				</view>
				
				<text lines="1" class="text_8">有效期(开始)</text>
				<view class="item" style="border-bottom: solid 2rpx #efefef;">
					<view class="flex-space-between week-list">
						<input type="text" placeholder="请选择" disabled v-model="ordersList.birthday" @click="showBirthdayPicker = true">
					</view>
				</view>
				
				<text lines="1" class="text_8">有效期(结束)</text>
				<view class="item" style="border-bottom: solid 2rpx #efefef;">
					<view class="flex-space-between week-list">
						<input type="text" placeholder="请选择" disabled v-model="ordersList.time" @click="showtimePicker = true">
					</view>
				</view>
				
				<text lines="1" class="text_8">金额</text>
				<view class="item" style="border-bottom: solid 2rpx #efefef;">
					<view class="flex-space-between week-list">
						<input type="text" placeholder="请选择">
					</view>
				</view>
				
				<text lines="1" class="text_8">选择赠品</text>
				<view class="item" style="border-bottom: solid 2rpx #efefef;">
					<view class="flex-space-between week-list" @click="chooseclick">
						<input type="text" placeholder="请选择" disabled>
					</view>
				</view>
				
				<text lines="1" class="text_8">加赠</text>
				<view class="item" style="border-bottom: solid 2rpx #efefef;">
					<view class="flex-space-between week-list">
						<input type="text" placeholder="请输入">
					</view>
				</view>
				
				<text lines="1" class="text_8">备注</text>
				<view class="item" style="border-bottom: solid 2rpx #efefef;">
					<view class="flex-space-between week-list" >
						<!-- <input type="text" placeholder="请选择" v-model="ordersList.occupation_relation" disabled  @click="showoccupation = true"> -->
						<input type="text" placeholder="请选择" >
					</view>
				</view>
			</view>
			<view class="btns flex-between">
				<u-button text="记账" shape="circle" @click="saveclick"
					color="linear-gradient(0deg, rgba(255,64,64,0.93), rgba(255,64,64,0.93), rgba(250,142,142,0.93));"
					size="large"></u-button>
			
			</view>
		</view>
		<!-- 有效期 （开始）-->
		<u-datetime-picker v-model="defaultBirthday" :show="showBirthdayPicker" mode="date"
			:minDate="minDate" :maxDate="maxDate" @confirm="confirmBirthday"
			@cancel="showBirthdayPicker = false" />
		<!-- 有效期 （结束）-->
		<u-datetime-picker v-model="defaulttime" :show="showtimePicker" mode="date"
			:minsDate="minsDate" :maxsDate="maxsDate" @confirm="confirmtime"
			@cancel="showtimePicker = false" />
		<!-- 操作员 -->
		<u-picker :show="showoccupation" :columns="occupation_status" keyName="label"
			@confirm="occupation_list" @cancel="showoccupation = false">
		</u-picker>
		<!-- 选择卡 -->
		<u-picker :show="showcard" :columns="card_status" keyName="label"
			@confirm="card_list" @cancel="showcard = false">
		</u-picker>
		
		<!-- 场馆切换 -->
		<van-popup closeable :show="show" round position="bottom" get-container="body" @close="showclose"
			:z-index='9999'>
			<view class="good-box">
				<view class="title">
					切换场馆
				</view>
				<view class="good-list">
					<view class="good-item" v-for="(item,index) in venuelist" :key="index" @click="onChangelist(item)">
						<view class="flex-align">
							<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
							<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								src="https://img.yzcdn.cn/vant/cat.jpeg" />
							<view class="info">
								<view class="name">{{item.venue_name}}</view>
								<view class="flex-align" v-if="item.project_list != ''">
									<view class="tag" v-if="item.project_list[0].name != ''">
										{{item.project_list[0].name}}
									</view>
									<view class="tag" v-if="item.project_list[1].name != '' && item.project_list[1]">
										{{item.project_list[1].name}}
									</view>
									<view class="tag" v-if="item.project_list[2].name != ''&& item.project_list[2]">
										{{item.project_list[2].name}}
									</view>
								</view>
								<view class="address">{{item.address}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	import {
		formatDate
	} from "@/utils/util.js";
	export default {
		data() {
			return {
				lineChartData: {},
				show: false,
				venuelist: [], //场馆列表
				itemChoose: {}, // 场馆数据
				itemChooselist: {}, // 场馆数据
				sex:'',
				defaultBirthday: new Date(new Date().getFullYear() - 3, 0, 1).getTime(),
				showBirthdayPicker: false,
				minDate: new Date(new Date().getFullYear() - 100, 0, 1).getTime(),
				maxDate: Date.now(),
				
				defaulttime: new Date(new Date().getFullYear() - 3, 0, 1).getTime(),
				showtimePicker: false,
				minsDate: new Date(new Date().getFullYear() - 100, 0, 1).getTime(),
				maxsDate: Date.now(),
				
				showoccupation:false,
				occupation_status: [], //操作员
				showcard:false,
				card_status: [], //操作员
				ordersList: {},
				
			}
		},
		onLoad(options) {
			this.type = options.type
			// 场馆数组
			if (uni.getStorageSync("entry_name") == '') {
				uni.showToast({
					title: '请登录！',
					icon: 'exception',
					duration: 850
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/my-center/my-center'
					})
				}, 1000);
			}
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			this.itemChooselist = this.venuelist[0]
			this.conf()
			this.cardlist()
		},
		methods: {
			// 记账
			saveclick(){
				uni.navigateTo({
					url:'./bookkeeping'
				})
			},
			// 选择赠品
			chooseclick(){
				uni.navigateTo({
					url:'../../page_member/application_card/choose_gift'
				})
			},
			// 选择会员
			selectclick(){
				uni.navigateTo({
					url:'../../page_member/member_profile/select_members_s'
				})
			},
			groupChange(n) {
				this.sex = n
			},
			// 开卡方式
			async cardlist() {
				let card_list = [
					{
						id: 1,
						label: "立即开卡"
					},
					{
						id: 2,
						label: "暂不开卡"
					}
				]
				this.card_status.push(
					card_list
				)
				// let params = {
				// 	app_id: this.$https.weixinAppId,
				// 	project_id: getApp().globalData.projectId,
				// }
				// let res = await train.conf(params);
				// if (res.code == 1) {
					
				// 	this.card_status.push(
				// 		res.data.list.card_list
				// 	)
				// }
			},
			// 操作员
			async conf() {
				let occupation_list = [
					{
						id: 1,
						label: "袁教练"
					},
					{
						id: 2,
						label: "石教练"
					}
				]
				this.occupation_status.push(
					occupation_list
				)
				// let params = {
				// 	app_id: this.$https.weixinAppId,
				// 	project_id: getApp().globalData.projectId,
				// }
				// let res = await train.conf(params);
				// if (res.code == 1) {
					
				// 	this.occupation_status.push(
				// 		res.data.list.occupation_list
				// 	)
				// }
			},
			// 操作员
			occupation_list(e) {
				this.ordersList.occupation_relation = e.value[0].label
				this.ordersList.occupation_relation_id = e.value[0].id
				this.showoccupation = false
			},
			// 选择卡
			card_list(e) {
				this.ordersList.card_relation = e.value[0].label
				this.ordersList.card_relation_id = e.value[0].id
				this.showcard = false
			},
			// 有效期（开始）
			confirmBirthday({
				value
			}) {
				this.ordersList.birthday = formatDate(value, 'YYYY-MM-DD');
				this.showBirthdayPicker = false;
			},
			// <!-- 有效期 （结束）-->
			confirmtime({
				value
			}) {
				this.ordersList.time = formatDate(value, 'YYYY-MM-DD');
				this.showtimePicker = false;
			},
			// 选择卡
			cardclick(){
				uni.navigateTo({
					url:'./cardlist'
				})
			},
			// 选中场馆
			onChangelist(item) {
				this.itemChoose = item
				this.lineChartData = []
				this.itemChooselist = this.itemChoose
				this.show = false
			},
			// 点击切换
			show_no() {
				this.show = true
			},
			// 关闭选择场馆弹窗
			showclose() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../static/css/member/member_index.scss';
	
	.group_3 {
		background-color: rgba(255, 255, 255, 1.000000);
		width: 710rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin: 160rpx 0 0 20rpx;
	
		.item {
			// padding: 29rpx 30rpx 30rpx;
			padding: 25rpx 30rpx 20rpx 30rpx;
	
			.item-title {
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}
	
			.value {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
			}
	
			.time-cell {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
				justify-content: flex-start;
	
				.time {
					width: 49%;
	
					&:last-of-type {
						margin-left: 20rpx;
					}
				}
			}
	
			.week-list {
				display: grid;
				// grid-template-columns: repeat(5, 1fr);
				grid-gap: 20rpx;
				position: relative;
	
				.week-item {
					padding: 15rpx 0;
					background-color: rgb(243, 243, 243);
					border-radius: 5rpx;
					text-align: center;
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 500;
					border: solid 2rpx transparent;
					box-sizing: border-box;
				}
	
				.active {
					color: rgba(255, 98, 0, 1);
					background-color: rgba(255, 65, 5, 0.1);
					// border: solid 2rpx rgb(99, 93, 247);
					position: relative;
	
					// &:before {
					// 	display: block;
					// 	content: '';
					// 	position: absolute;
					// 	width: 27rpx;
					// 	height: 28rpx;
					// 	right: -2rpx;
					// 	bottom: -2rpx;
					// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
					// 	background-repeat: no-repeat;
					// 	background-size: 100%;
					// }
				}
	
				.active1 {
					color: rgba(255, 98, 0, 1);
					background-color: rgba(255, 65, 5, 0.1);
					// border: solid 2rpx rgb(99, 93, 247);
					position: relative;
				}
	
				.active2 {
					color: rgba(255, 98, 0, 1);
					background-color: rgba(255, 65, 5, 0.1);
					// border: solid 2rpx rgb(99, 93, 247);
					position: relative;
				}
	
				.check {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					position: absolute;
					bottom: 10rpx;
					right: 0;
				}
			}
		}
	}
	
	
	.text_2 {
		width: 93rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 15rpx 0 0 21rpx;
	}
	
	.section_1 {
		width: 100%;
		height: 90rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 28rpx 0 0rpx 20rpx;
		border-bottom: solid 2rpx #efefef;
	}
	
	.box_3 {
		height: 40rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: row;
		// width: 150rpx;
		
		.box_name{
			display: flex;
			flex-direction: column;
			margin-left: 10rpx;
		}
	}
	.image_1 {
		width: 27rpx;
		height: 30rpx;
		margin-top: 20rpx;
	}
	.label_1 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-top: 15rpx;
	}
	
	.label_2 {
		width: 40rpx;
		height: 40rpx;
		margin-left: -6rpx;
		border-radius: 50%;
	}
	
	.label_3 {
		width: 40rpx;
		height: 40rpx;
		margin-left: -6rpx;
		border-radius: 50%;
	}
	
	.image-text_1 {
		width: 200rpx;
		height: 27rpx;
		margin-top: 6rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin-right: 40rpx;
		
		.image-card{
			flex-direction: row;
			display: flex;
		}
	}
	
	.text-group_1 {
		width: 126rpx;
		height: 65rpx;
		overflow-wrap: break-word;
		color: #635DF7;
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 65rpx;
	}
	
	.icon_2 {
		width: 7rpx;
		height: 14rpx;
		margin-top:25rpx;
	}
	
	.text_8 {
		width: 95rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 20rpx 0 0 19rpx;
	}
	
	
	
	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 30rpx;
		height: 160rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 99;
		background-color: #fff;
	
		/deep/.u-button {
			&+.u-button {
				margin-left: 20rpx;
	
			}
		}
	}
	
</style>